<template>
  <div>
    <h2>基本示例</h2>
    <vue-tabulation
      class="demo-hello"
      :dataSource="dataSource"
      :columns="columns"
      :height="height"
    ></vue-tabulation>
    <h2> y-table </h2>
    <y-table border
      class="demo-hello"
      :dataSource="dataSource"
      :columns="ycolumns"
      :height="height"
    ></y-table>
    <fieldset>
      <legend>改变 <code>height</code> 属性</legend>
      <div>
        <input type="radio" id="one" :value="200" v-model.number="height" />
        <label for="one">200，小于本省高度，产生表头固定效果</label>
        <br />
        <input type="radio" id="two" :value="300" v-model.number="height" />
        <label for="two">高度为 300</label>
        <br />
        <button @click="height = undefined">
          默认(undefined)，高度为本身高度
        </button>
      </div>
    </fieldset>
  </div>
</template>

<script>
export default {
  name: 'demo-hello',
  data() {
    return {
      height: 200,
      columns: [
        {
          label: '姓名',
          prop: 'name',
          width: 358,
        },
        {
          label: '年龄',
          prop: 'age',
          width: 358,
        },
        {
          label: '住址',
          prop: 'address',
          width: 358,
        },
      ],
      ycolumns: [
        {
          label: '姓名',
          prop: 'name',
          width: 500,
        },
        {
          label: '年龄',
          prop: 'age',
          width: 500,
        },
        {
          label: '住址',
          prop: 'address',
          width: 500,
        },
      ],
      dataSource: [
        {
          name: '张三',
          age: 20,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          name: '李四',
          age: 40,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          name: '王五',
          age: 18,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          name: '赵六',
          age: 34,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          name: '燕七',
          age: 7,
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
    }
  },
  methods: {
    change(value) {
      this.height = value
    },
  },
}
</script>

<style>
.demo-hello {
  background: white;
}
</style>
